<template>
	<div id="work">
		<div class="page__bd">
			<div class="weui-tab">
				<div class="weui-tab__panel">
					<div class="weui-tab__panel_top" id="workpage">
						<div class="weui-tab__panel_top_left">
							<p class="title">工作台</p>
						</div>
					</div>
					<div class="weui-tab__panel_bd">
						<div class="big_box">
							<div class="weui-tab__panel-bd_1" v-for="(item,index) in list" :key="index">
								<p class="weui-tab__panel-bd_1_top">{{item.title}}</p>
								<ul>
									<li v-for="(items,indexs) in item.childs" @click="routerTo(items.url,items.title)">
										<img :src="baseurl + items.logo" class="img_1" />
										<p class="p_router">{{items.title}}</p>
									</li>
								</ul>
							</div>
						</div>
					</div>
				</div>
				<div class="weui-tabbar">
					<PublicFoot></PublicFoot>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import PublicFoot from '@/components/publics/PublicFoot'
	export default {
		name: 'work',
		data() {
			return {
				list: {},
				baseurl: ''
			}
		},
		methods: {
			routerTo(thisurl, thistitle) {
				this.$router.push({
					path: thisurl,
					query: {
						thisurl: thisurl,
						thistitle: thistitle,
						routerTo(thisurl, thistitle, thisindexs) {
							this.$router.push({
								path:'Application',
								query: {
									thisurl: thisurl,
									thistitle: thistitle,
									thisindexs: thisindexs
								}
							})
						}
					},
					components: {
						PublicFoot
					},//声明函数周期，通过then获取数据
			    })
			}
		},
		created() {
			let _this = this;
			this.$post("/app/post/AppSysUserTokenController/queryMenuBySession", {}).then((json) => {
				if(json.returnCode == 0) {
					_this.list = json.rows;
					_this.baseurl = this.NET.BASE_URL;
				} else {
					this.$message({
						message: json.returnMessage
					});
				}
			});
		},
		components: {
			PublicFoot
		}
	}

</script>

<style scoped="scoped">
	#work {
		width: 100%;
		height: 100%;
	}
	
	.weui-tab__panel_top_left {
		width: 100%;
		text-align: center;
		margin-left: 0px;
	}

	/*主体部分*/
	.weui-tab__panel_bd{
		height: calc(100% - 45px);
		width: 100%;
		float: left;
		background-color: rgb(252, 251, 251);
	}
	
	.big_box {
		width: 100%;
		height: 100%;
	}
	
	.weui-tab__panel-bd_1 {
		width: calc(100% - 20px);
	    background-color: white;
	    float: left;
	    margin: 10px 10px;
	}
	
	.weui-tab__panel-bd_1_top {
		width: calc(100% - 10px);
		height: 1.5em;
	    line-height: 1.5em;
	    font-size: 0.9em;
		float: left;
		padding-left: 10px;
	}
	
	.weui-tab__panel-bd_1 ul {
		width: 100%;
		border-top: 1px solid gainsboro;
		list-style: none;
		float: left;
	    padding: 8px 0px;
	}
	
	.weui-tab__panel-bd_1 ul li {
		width: 25%;
        height: auto;
		float: left;
		margin-top: 10px;
		text-align: center;
	}
	
	.weui-tab__panel-bd_1 ul li .p_router {
		color: black;
		font-size: 0.7em;
	}
	
	.weui-tab__panel-bd_1 ul li .img_1 {
		height: 40%;
    	width: 40%;
	}
</style>